<template>
    <div class="the-appoint">
        <div class="appoint-top">
            <table class="table-common">
                <thead>
                <tr>
                    <th>接种者姓名</th>
                    <th>出生日期</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>接种证号</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>{{peopleInfo.name}}</td>
                    <td>{{peopleInfo.birthday}}</td>
                    <td>
                        <span v-if="peopleInfo.sex==true">女</span>
                        <span v-else>男</span>
                    </td>
                    <td>{{peopleInfo.realage}}</td>
                    <td>{{peopleInfo.serialnum?peopleInfo.serialnum:'-'}}</td>
                    <td>
                        <a @click="goInoculateHistory">
                            <span class="history-text">接种历史</span>
                            <img src="../../../static/images/right-arrow.png" class="right-arrow">
                        </a>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>

        <p class="title-cen">本次推荐接种</p>

        <div class="list-data">
            <div class="condition">
                <span class="label">接种类型</span>
                <Select v-model="formCustom.inoculatetype" class="common-select" style="width:260px">
                    <Option v-for="item in inoculateType" :value="item.value" >{{ item.label }}</Option>
                </Select>
            </div>

            <div class="table-vaccine">
                <div class="vaccine-select">
                    <Button  :class="vaccineSelectType==1?'active':''"  @click="vaccineSelect(1)">一类疫苗</Button>
                    <Button :class="vaccineSelectType==2?'active':''"   @click="vaccineSelect(2)">二类疫苗</Button>
                </div>

                <div class="table-wrapper">
                    <!--一类疫苗-->
                    <div class="table-con" v-if="vaccineSelectType==1">
                        <!--延续接种-->
                        <div class="table-points">
                            <a class="vaccination-top">延续接种</a>
                            <table v-if="continuelist.length>0">
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in continuelist" :key="index">
                                    <input type="hidden" value=""   :class='`planidContinuelistOne${index}  planidOneA`' >
                                    <input type="hidden" value=""   :class='`vaccineidContinuelistOne${index}  vaccineidOneA`' >
                                    <td>
                                        <label class="check_label check_label-item ">
                                            <input type="checkbox" class=" publish_accredit-dot"
                                                   :class='`checkboxContinuelistOne${index}   checkboxContinuelistTwo${index}`'
                                                   @click="checkboxContinuelistOneClick(item,index,null)"
                                                   disabled>
                                            <span class="publish_accredit-dot-mark "></span>
                                        </label>
                                    </td>
                                    <td>{{item.vaccinename}}</td>
                                    <td>{{item.dose}}/{{item.totaldose}}</td>
                                    <td>
                                        <Button type="primary"
                                                :class='`btnContinuelistOne${index}   btnContinuelistTwo${index}`'
                                                @click="chooseContinuelistOne(item,index,1,index)">
                                            选择
                                        </Button>
                                    </td>
                                    <td>
                                        <Dropdown>
                                            <a href="javascript:void(0)">
                                                操作
                                                <Icon type="ios-arrow-down"></Icon>
                                            </a>
                                            <DropdownMenu slot="list">
                                                <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </td>
                                    <td>
                                        <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                            <label class="check_label check_label-item ">
                                                <input type="checkbox"
                                                       class=" publish_accredit-dot"
                                                       :class='`checkboxContinuelistOne${index}_${groupIndex}  checkboxContinuelistTwo${index}`'
                                                       @click="checkboxContinuelistOneClick(group,index,index+'_'+groupIndex)"
                                                       disabled>
                                                <span class="publish_accredit-dot-mark "></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>
                                        <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.vaccinename}}</div>
                                    </td>
                                    <td>
                                        <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.dose}}/{{group.totaldose}}</div>
                                    </td>
                                    <td>
                                        <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex" style="margin-bottom: 10px;">
                                            <Button type="primary"
                                                    :class='`btnContinuelistOne${index}_${groupIndex}  btnContinuelistTwo${index}`'
                                                    @click="chooseContinuelistOne(group,index+'_'+groupIndex,0,index)">选择</Button>
                                        </div>
                                    </td>
                                    <td>
                                        <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                            <Dropdown>
                                                <a href="javascript:void(0)">
                                                    操作
                                                    <Icon type="ios-arrow-down"></Icon>
                                                </a>
                                                <DropdownMenu slot="list">
                                                    <DropdownItem @click.native="entry(group)">录入</DropdownItem>
                                                    <DropdownItem @click.native="refuse(group,1)">拒种</DropdownItem>
                                                    <DropdownItem @click.native="refuse(group,2)">禁忌</DropdownItem>
                                                    <DropdownItem @click.native="refuse(group,3)">超期</DropdownItem>
                                                    <DropdownItem @click.native="refuse(group,4)">替代</DropdownItem>
                                                    <DropdownItem @click.native="refuse(group,5)">已患</DropdownItem>
                                                </DropdownMenu>
                                            </Dropdown>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div v-else>
                                <table>
                                    <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称（一类)</th>
                                        <th>当前剂次/总剂次</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>当前剂次/总剂次</th>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="no-data">暂无数据</div>
                            </div>
                        </div>

                        <div class="line" style="width:100%;background:#f1f2f7;height: 15px; "></div>

                        <!--到期未种-->
                        <div class="table-points">
                            <a class="vaccination-top" style="background: #4264B3">到期未种</a>
                            <table  v-if="hislist.length>0" >
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody class="hislistBody">
                                    <tr v-for="(item,index) in hislist" :key="index">
                                        <input type="hidden" value=""   :class='`planidHislistOne${index} planidOneA`' >
                                        <input type="hidden" value=""   :class='`vaccineidHislistOne${index} vaccineidOneA`' >
                                        <td>
                                            <label class="check_label check_label-item ">
                                                <input type="checkbox" class=" publish_accredit-dot"
                                                       :class='`checkboxHislistOne${index}   checkboxHislistTwo${index}`'
                                                       @click="checkboxHislistOneClick(item,index,null)"
                                                       disabled>
                                                <span class="publish_accredit-dot-mark "></span>
                                            </label>
                                        </td>
                                        <td>{{item.vaccinename}}</td>
                                        <td>{{item.dose}}/{{item.totaldose}}</td>
                                        <td>
                                            <Button type="primary" @click="chooseHislistOne(item,index,1,index)"
                                                    :class='`btnHislistOne${index}   btnHislistTwo${index}`'>选择</Button>
                                        </td>
                                        <td>
                                            <Dropdown>
                                                <a href="javascript:void(0)">
                                                    操作
                                                    <Icon type="ios-arrow-down"></Icon>
                                                </a>
                                                <DropdownMenu slot="list">
                                                    <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                    <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                    <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                    <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                    <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                    <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                                </DropdownMenu>
                                            </Dropdown>
                                        </td>
                                        <td>
                                            <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                                <label class="check_label check_label-item ">
                                                    <input type="checkbox" class=" publish_accredit-dot"
                                                           :class='`checkboxHislistOne${index}_${groupIndex}  checkboxHislistTwo${index}`'
                                                           @click="checkboxHislistOneClick(group,index,index+'_'+groupIndex)"
                                                           disabled>
                                                    <span class="publish_accredit-dot-mark "></span>
                                                </label>
                                            </div>
                                        </td>
                                        <td>
                                            <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.vaccinename}}</div>
                                        </td>
                                        <td>
                                            <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.dose}}/{{group.totaldose}}</div>
                                        </td>
                                        <td>
                                            <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex" style="margin-bottom: 10px;">
                                                <Button type="primary"
                                                        :class='`btnHislistOne${index}_${groupIndex}  btnHislistTwo${index}`'
                                                        @click="chooseHislistOne(group,index+'_'+groupIndex,0,index)">选择</Button>
                                            </div>
                                        </td>
                                        <td>
                                            <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                                <Dropdown>
                                                    <a href="javascript:void(0)">
                                                        操作
                                                        <Icon type="ios-arrow-down"></Icon>
                                                    </a>
                                                    <DropdownMenu slot="list">
                                                        <DropdownItem @click.native="entry(group)">录入</DropdownItem>
                                                        <DropdownItem @click.native="refuse(group,1)">拒种</DropdownItem>
                                                        <DropdownItem @click.native="refuse(group,2)">禁忌</DropdownItem>
                                                        <DropdownItem @click.native="refuse(group,3)">超期</DropdownItem>
                                                        <DropdownItem @click.native="refuse(group,4)">替代</DropdownItem>
                                                        <DropdownItem @click.native="refuse(group,5)">已患</DropdownItem>
                                                    </DropdownMenu>
                                                </Dropdown>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <div v-else>
                                <table>
                                    <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>剂次/总剂次</th>
                                        <th>操作</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>剂次/总剂次</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="no-data">暂无数据</div>
                            </div>
                        </div>

                        <div class="line" style="width:100%;background:#f1f2f7;height: 15px; "></div>

                        <!--常规接种  curlist-->
                        <div class="table-points">
                            <a class="vaccination-top" style="background: #26D8C0">常规接种</a>
                            <table v-if="curlist.length>0">
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <!--curlist-->
                                  <tr v-for="(item,index) in curlist" :key="index">
                                      <input type="hidden" value=""   :class='`planidCurlistOne${index}  planidOneA`' >
                                      <input type="hidden" value=""   :class='`vaccineidCurlistOne${index} vaccineidOneA`' >
                                      <td>
                                          <label class="check_label check_label-item ">
                                              <input type="checkbox" class=" publish_accredit-dot"
                                                     :class='`checkboxCurlistOne${index}   checkboxCurlistTwo${index}`'
                                                     @click="checkboxCurlistOneClick(item,index,null)"
                                                     disabled>
                                              <span class="publish_accredit-dot-mark "></span>
                                          </label>
                                      </td>
                                      <td>{{item.vaccinename}}</td>
                                      <td>{{item.dose}}/{{item.totaldose}}</td>
                                      <td>
                                          <Button type="primary" @click="chooseCurlistOne(item,index,1,index)"
                                                  :class='`btnCurlistOne${index}   btnCurlistTwo${index}`'>选择</Button>
                                      </td>
                                      <td>
                                          <Dropdown>
                                              <a href="javascript:void(0)">
                                                  操作
                                                  <Icon type="ios-arrow-down"></Icon>
                                              </a>
                                              <DropdownMenu slot="list">
                                                  <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                  <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                  <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                  <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                  <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                  <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                              </DropdownMenu>
                                          </Dropdown>
                                      </td>
                                      <td>
                                          <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                              <label class="check_label check_label-item ">
                                                  <input type="checkbox" class=" publish_accredit-dot"
                                                         :class='`checkboxCurlistOne${index}_${groupIndex}  checkboxCurlistTwo${index}`'
                                                         @click="checkboxCurlistOneClick(group,index,index+'_'+groupIndex)"
                                                         disabled>
                                                  <span class="publish_accredit-dot-mark "></span>
                                              </label>
                                          </div>
                                      </td>
                                      <td>
                                          <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.vaccinename}}</div>
                                      </td>
                                      <td>
                                          <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">{{group.dose}}/{{group.totaldose}}</div>
                                      </td>
                                      <td>
                                          <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex" style="margin-bottom: 10px;">
                                              <Button type="primary"
                                                      :class='`btnCurlistOne${index}_${groupIndex}  btnCurlistTwo${index}`'
                                                      @click="chooseCurlistOne(group,index+'_'+groupIndex,0,index)">选择</Button>
                                          </div>
                                      </td>
                                      <td>
                                          <div v-for="(group,groupIndex) in item.replaceList" :key="groupIndex">
                                              <Dropdown>
                                                  <a href="javascript:void(0)">
                                                      操作
                                                      <Icon type="ios-arrow-down"></Icon>
                                                  </a>
                                                  <DropdownMenu slot="list">
                                                      <DropdownItem @click.native="entry(group)">录入</DropdownItem>
                                                      <DropdownItem @click.native="refuse(group,1)">拒种</DropdownItem>
                                                      <DropdownItem @click.native="refuse(group,2)">禁忌</DropdownItem>
                                                      <DropdownItem @click.native="refuse(group,3)">超期</DropdownItem>
                                                      <DropdownItem @click.native="refuse(group,4)">替代</DropdownItem>
                                                      <DropdownItem @click.native="refuse(group,5)">已患</DropdownItem>
                                                  </DropdownMenu>
                                              </Dropdown>
                                          </div>
                                      </td>
                                  </tr>
                                </tbody>
                            </table>
                            <div v-else>
                                <table>
                                    <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                        <th>选择</th>
                                        <th>替代疫苗</th>
                                        <th>剂次/总剂次</th>
                                        <th>接种疫苗</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="no-data">暂无数据</div>
                            </div>
                        </div>

                    </div>


                    <!--二类疫苗-->
                    <div class="table-con" v-if="vaccineSelectType==2">
                        <!--延续接种-->
                        <div class="table-points">
                            <a class="vaccination-top">延续接种</a>
                            <table v-if="continuelist.length>0">
                                <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>当前剂次/总剂次</th>
                                        <th>接种疫苗id</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in continuelist" :key="index">
                                    <td>
                                        <label class="check_label check_label-item ">
                                            <input type="checkbox" class=" publish_accredit-dot" disabled ref="checkboxContinuelistTwo"
                                                   @click="checkboxContinuelistTwo(item,index)" >
                                            <span class="publish_accredit-dot-mark "></span>
                                        </label>
                                    </td>
                                    <td>{{item.vaccinename}}--{{item.id}}</td>
                                    <td>{{item.dose}}/{{item.totaldose}}</td>
                                    <td>
                                        <Button type="primary" @click="choseContinuelistTwo(item,index)" ref="choseContinuelistTwoBtn">选择</Button>
                                        <input type="hidden" value="" ref="vaccineidContinuelistTwo" class="vaccineidContinuelistTwo">
                                        <input type="hidden" :value="item.id" ref="planidContinuelistTwo" class="planidContinuelistTwo">
                                    </td>
                                    <td>
                                        <Dropdown>
                                            <a href="javascript:void(0)">
                                                操作
                                                <Icon type="ios-arrow-down"></Icon>
                                            </a>
                                            <DropdownMenu slot="list">
                                                <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div v-else>
                                <table>
                                    <thead>
                                    <tr>
                                        <th>选择</th>
                                        <th>疫苗名称</th>
                                        <th>当前剂次/总剂次</th>
                                        <th>接种疫苗id</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="no-data">暂无数据</div>
                            </div>
                        </div>

                        <div class="line" style="width:100%;background:#f1f2f7;height: 15px; "></div>

                        <!--到期未种-->
                        <div class="table-points">
                            <a class="vaccination-top" style="background: #4264B3">到期未种</a>
                            <table>
                                <thead>
                                   <tr>
                                       <th>选择</th>
                                       <th>疫苗名称</th>
                                       <th>当前剂次/总剂次</th>
                                       <th>接种疫苗id</th>
                                       <th>操作</th>
                                   </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in hislist" :key="index">
                                    <td>
                                        <label class="check_label check_label-item ">
                                            <input type="checkbox" class=" publish_accredit-dot"  disabled
                                                   ref="checkboxHislistTwo"  @click="checkboxHislistTwo(item,index)">
                                            <span class="publish_accredit-dot-mark "></span>
                                        </label>
                                    </td>
                                    <td>{{item.vaccinename}}--{{item.id}}</td>
                                    <td>{{item.dose}}/{{item.totaldose}}</td>
                                    <td>
                                        <Button type="primary" @click="chosePlansHislistTwo(item,index)" ref="chooseHislistTwoBtn">选择</Button>
                                        <input type="hidden" value="" ref="vaccineidHislistTwo" class="vaccineidHislistTwo">
                                        <input type="hidden" :value="item.id" ref="planidHislistTwo" class="planidHislistTwo">
                                    </td>
                                    <td>
                                        <Dropdown>
                                            <a href="javascript:void(0)">
                                                操作
                                                <Icon type="ios-arrow-down"></Icon>
                                            </a>
                                            <DropdownMenu slot="list">
                                                <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="line" style="width:100%;background:#f1f2f7;height: 15px; "></div>

                        <!--常规接种-->
                        <div class="table-points">
                            <a class="vaccination-top" style="background: #26D8C0">常规接种</a>
                            <table>
                                <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>疫苗名称</th>
                                    <th>当前剂次/总剂次</th>
                                    <th>接种疫苗id</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in curlist" :key="index">
                                    <td>
                                        <label class="check_label check_label-item ">
                                            <input type="checkbox" class=" publish_accredit-dot" disabled   ref="checkboxCurlistTwo"  @click="checkboxCurlistTwo(item,index)" >
                                            <span class="publish_accredit-dot-mark "></span>
                                        </label>
                                    </td>
                                    <td>{{item.vaccinename}}</td>
                                    <td>{{item.dose}}/{{item.totaldose}}</td>
                                    <td>
                                        <Button type="primary" @click="chosePlansCurlistTwo(item,index)" ref="chooseCurlistTwoBtn">选择</Button>
                                        <input type="hidden" value="" ref="vaccineidCurlistTwo" class="vaccineidCurlistTwo">
                                        <input type="hidden" :value="item.id" ref="planidCurlistTwo" class="planidCurlistTwo">
                                    </td>
                                    <td>
                                        <Dropdown>
                                            <a href="javascript:void(0)">
                                                操作
                                                <Icon type="ios-arrow-down"></Icon>
                                            </a>
                                            <DropdownMenu slot="list">
                                                <DropdownItem @click.native="entry(item)">录入</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,1)">拒种</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,2)">禁忌</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,3)">超期</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,4)">替代</DropdownItem>
                                                <DropdownItem @click.native="refuse(item,5)">已患</DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>

            </div>

        </div>


        <div class="btn-wrapper">
            <Button type="primary" @click="submit" :loading="loadingSubmit" class="save-btn-common">保存</Button>
            <Button class="cancel-btn-common">取 消</Button>
        </div>

        <!--选择疫苗-->
        <vendor :visible.sync="vendorVisible" :vendorId="vendorId"
                :vaccineSelectType="vaccineSelectType" @vendorInfo="vendorInfo"></vendor>

        <!--替代疫苗选择厂商-->
        <replace-vendor :visible.sync="vendorReplaceVisible" :vendorId="vendorId"
                @vendorInfo="vendorInfo" :chooseType="chooseType"></replace-vendor>


        <!--录入-->
        <last-appoint-entry  :visible.sync="entryVisible" :entryInfo="entryInfo"  :babytype="0"></last-appoint-entry>
    </div>
</template>

<script>
    import {peoplePlanbaby, vaccineVendor, refuseino,saveCommon } from '@/api/inoculate/inoculate';
    import Vendor from "./components/vendor";
    import replaceVendor from "./components/replaceVendor";
    import $ from 'jquery';
    import lastAppointEntry from "./components/lastAppointEntry";

    export default {
        data () {
            return {
                inoculateType: [
                    {
                        value: 1,
                        label: '常规接种'
                    },
                    {
                        value: 2,
                        label: '强化接种'
                    },
                    {
                        value: 3,
                        label: '查漏补种'
                    },
                    {
                        value: 4,
                        label: '应急接种'
                    }
                ],
                vaccineSelectType: 1,   //  疫苗类型
                peopleInfo: {},  // 基本信息
                hislist: [],  // 到期未种
                continuelist: [],  // 延续接种
                curlist: [],  // 常规接种

                formCustom: {
                    inoculatetype: 1
                },

                vendorVisible: false,
                vendorId: null,

                indexHislistTwo: null,
                indexContinuelistTwo: null,
                indexCurlistTwo: null,
                appointStatus: 0,

                loadingSubmit: false,

                indexHislistOneFront: null,
                vendorReplaceVisible: false,

                indexHislistOneBehind: null,


                chooseType: null,
                hislistIndexOne: null,
                hislistIndexOneFirst: null,
                vaccineIdIndexOne: null,

                continuelistIndexOne: null,
                continuelistIndexOneFirst: null,

                curlistIndexOne: null,
                curlistIndexOneFirst: null,

                entryInfo: {},
                entryVisible: false,
            };
        },
        components: {
            Vendor,
            replaceVendor,
            lastAppointEntry
        },
        mounted () {
            this.getData();
        },
        computed: {
            turnId () {
                return this.$route.query.turnId;
            },
            peopleid () {
                return this.$route.query.peopleid;
            }
        },
        watch: {
            entryVisible(newVal,oldVal){
                if(newVal!==oldVal && newVal==false){
                    peoplePlanbaby({
                        id: this.turnId,
                        peopleid: this.peopleid,
                        vaccineType: this.vaccineSelectType
                    }).then((resPeople) => {
                        if (resPeople.data.error == 0) {
                            if(resPeople.data.lastlist.length==0){
                                // 本次推荐
                                this.peopleInfo = resPeople.data.people;
                                this.hislist = resPeople.data.hislist;
                                this.continuelist = resPeople.data.continuelist;
                                this.curlist = resPeople.data.curlist;
                            }else{
                                // 进入上次预约
                                this.$router.push({path: '/home/lastAppoint',query:{turnId: this.turnId,peopleid: this.peopleid}});
                            }
                        }
                    });
                }
            },
        },
        methods: {
            getData () {
                peoplePlanbaby({
                    id: this.turnId,
                    peopleid: this.peopleid,
                    vaccineType: this.vaccineSelectType
                }).then((res) => {
                    if (res.data.error == 0) {
                        this.peopleInfo = res.data.people;
                        this.hislist = res.data.hislist;
                        this.continuelist = res.data.continuelist;
                        this.curlist = res.data.curlist;
                    }
                });
            },
            vaccineSelect (val) {
                this.vaccineSelectType = val;
                this.getData();
            },
            goInoculateHistory () {
                this.$router.push({path: '/home/inoculateHistory',query:{peopleid: this.peopleid,babyTypes:0}});
            },
            // 二类疫苗到期未种点击选择按钮  到期未种
            chosePlansHislistTwo (item, index) {
                this.vendorVisible = true;
                this.vendorId = item.vaccinecoding;
                this.indexHislistTwo = index;
                this.appointStatus = 1;   //  二类疫苗的到期未种
            },
            // 二类疫苗到期未种点击复选框  到期未种
            checkboxHislistTwo (item, index) {
                if (this.$refs.checkboxHislistTwo[index].checked == false){
                    this.$refs.checkboxHislistTwo[index].disabled = true;
                    this.$refs.vaccineidHislistTwo[index].defaultValue = '';
                    this.$refs.chooseHislistTwoBtn[index].$el.innerText = '选择';
                }
            },
            // 二类疫苗延续接种点击选择按钮  延续接种
            choseContinuelistTwo (item, index) {
                this.vendorVisible = true;
                this.vendorId = item.vaccinecoding;
                this.indexContinuelistTwo = index;
                this.appointStatus = 2; //  二类疫苗的延续接种
            },
            // 二类疫苗延续接种点击复选框  延续接种
            checkboxContinuelistTwo (item, index) {
                if (this.$refs.checkboxContinuelistTwo[index].checked == false){
                    this.$refs.checkboxContinuelistTwo[index].disabled = true;
                    this.$refs.vaccineidContinuelistTwo[index].defaultValue = '';
                    this.$refs.choseContinuelistTwoBtn[index].$el.innerText = '选择';
                }
            },
            // 二类疫苗常规接种点击选择按钮  常规接种
            chosePlansCurlistTwo (item, index) {
                this.vendorVisible = true;
                this.vendorId = item.vaccinecoding;
                this.indexCurlistTwo = index;
                this.appointStatus = 3; //  二类疫苗的常规接种
            },
            // 二类疫苗常规接种点击复选框  常规接种
            checkboxCurlistTwo(item, index){
                if (this.$refs.checkboxCurlistTwo[index].checked == false){
                    this.$refs.checkboxCurlistTwo[index].disabled = true;
                    this.$refs.vaccineidCurlistTwo[index].defaultValue = '';
                    this.$refs.chooseCurlistTwoBtn[index].$el.innerText = '选择';
                }
            },
            // 疫苗弹窗的回调
            vendorInfo (val) {
                if (this.appointStatus == 1) {  // 二类疫苗的到期未种
                    this.$refs.vaccineidHislistTwo[this.indexHislistTwo].defaultValue = val.id;
                    this.$refs.checkboxHislistTwo[this.indexHislistTwo].checked = true;
                    this.$refs.checkboxHislistTwo[this.indexHislistTwo].disabled = false;
                    this.$refs.chooseHislistTwoBtn[this.indexHislistTwo].$el.innerText = '已选择';
                } else if (this.appointStatus == 2){  // 二类疫苗的延续接种
                    this.$refs.vaccineidContinuelistTwo[this.indexContinuelistTwo].defaultValue = val.id;
                    this.$refs.checkboxContinuelistTwo[this.indexContinuelistTwo].checked = true;
                    this.$refs.checkboxContinuelistTwo[this.indexContinuelistTwo].disabled = false;
                    this.$refs.choseContinuelistTwoBtn[this.indexContinuelistTwo].$el.innerText = '已选择';
                } else if (this.appointStatus == 3){  // 二类疫苗的常规接种
                    this.$refs.vaccineidCurlistTwo[this.indexCurlistTwo].defaultValue = val.id;
                    this.$refs.checkboxCurlistTwo[this.indexCurlistTwo].checked = true;
                    this.$refs.checkboxCurlistTwo[this.indexCurlistTwo].disabled = false;
                    this.$refs.chooseCurlistTwoBtn[this.indexCurlistTwo].$el.innerText = '已选择';
                } else if (this.appointStatus == 4) {   // 一类疫苗到期未种
                    $('.checkboxHislistTwo' + this.hislistIndexOneFirst).prop('checked',false);
                    $('.checkboxHislistTwo' + this.hislistIndexOneFirst)[0].disabled=true;

                    let btnHislistTwoArray=$('.btnHislistTwo' + this.hislistIndexOneFirst);

                    for(let i in btnHislistTwoArray){
                        if(btnHislistTwoArray[i].innerText){
                            btnHislistTwoArray[i].innerText='选择'
                        }
                    }

                    $('.checkboxHislistOne' + this.hislistIndexOne)[0].disabled=false;
                    $('.checkboxHislistOne' + this.hislistIndexOne).prop('checked',true);
                    $('.btnHislistOne' + this.hislistIndexOne)[0].innerText = '已选择';

                    $('.planidHislistOne'+this.hislistIndexOneFirst)[0].defaultValue = val.id;  // planid
                    $('.vaccineidHislistOne'+this.hislistIndexOneFirst)[0].defaultValue = this.vaccineIdIndexOne;
                } else if (this.appointStatus == 5) {
                    $('.checkboxContinuelistTwo' + this.continuelistIndexOneFirst).prop('checked',false);
                    $('.checkboxContinuelistTwo' + this.continuelistIndexOneFirst)[0].disabled=true;

                    let btnHislistTwoArray=$('.btnContinuelistTwo' + this.hislistIndexOneFirst);
                    for (let i in btnHislistTwoArray){
                        if (btnHislistTwoArray[i].innerText){
                            btnHislistTwoArray[i].innerText='选择'
                        }
                    }

                    $('.checkboxContinuelistOne' + this.continuelistIndexOne)[0].disabled=false;
                    $('.checkboxContinuelistOne' + this.continuelistIndexOne).prop('checked',true);
                    $('.btnContinuelistOne' + this.continuelistIndexOne)[0].innerText = '已选择';
                    $('.planidContinuelistOne'+this.continuelistIndexOneFirst)[0].defaultValue = val.id;  // planid
                    $('.vaccineidContinuelistOne'+this.continuelistIndexOneFirst)[0].defaultValue = this.vaccineIdIndexOne;

                } else if (this.appointStatus==6){
                    $('.checkboxCurlistTwo' + this.curlistIndexOneFirst).prop('checked',false);
                    $('.checkboxCurlistTwo' + this.curlistIndexOneFirst)[0].disabled=true;

                    let btnHislistTwoArray=$('.btnCurlistTwo' + this.curlistIndexOneFirst);
                    for (let i in btnHislistTwoArray){
                        if (btnHislistTwoArray[i].innerText){
                            btnHislistTwoArray[i].innerText='选择'
                        }
                    }

                    $('.checkboxCurlistOne' + this.curlistIndexOne)[0].disabled=false;
                    $('.checkboxCurlistOne' + this.curlistIndexOne).prop('checked',true);
                    $('.btnCurlistOne' + this.curlistIndexOne)[0].innerText = '已选择';
                    $('.planidCurlistOne'+this.curlistIndexOneFirst)[0].defaultValue = val.id;
                    $('.vaccineidCurlistOne'+this.curlistIndexOneFirst)[0].defaultValue = this.vaccineIdIndexOne;

                }
            },
            submit () {
                let that=this;
                this.formCustom.peopleid=Number(this.peopleid);
                this.formCustom.id=Number(this.turnId);

                if(this.vaccineSelectType==2){  // 二类疫苗
                    var vaccineidHislistArrayTwo=[];
                    var planidHislistArrayTwo=[];
                    if(this.$refs.checkboxHislistTwo){
                        for(var i=0;i<this.$refs.checkboxHislistTwo.length;i++){
                            if(this.$refs.checkboxHislistTwo[i].checked == true){
                                vaccineidHislistArrayTwo.push(this.$refs.vaccineidHislistTwo[i].defaultValue);
                                planidHislistArrayTwo.push(this.$refs.planidHislistTwo[i].defaultValue)
                            }
                        }
                    }

                    var vaccineidContinuelistArrayTwo=[];
                    var planidContinuelistArrayTwo=[];
                    if(this.$refs.checkboxContinuelistTwo){
                        for(var i=0;i<this.$refs.checkboxContinuelistTwo.length;i++){
                            if(this.$refs.checkboxContinuelistTwo[i].checked == true){
                                vaccineidContinuelistArrayTwo.push(this.$refs.vaccineidContinuelistTwo[i].defaultValue);
                                planidContinuelistArrayTwo.push(this.$refs.planidContinuelistTwo[i].defaultValue);
                            }
                        }
                    }

                    var vaccineidCurlistArrayTwo=[];
                    var planidCurlistArrayTwo=[];
                    if(this.$refs.checkboxCurlistTwo){
                        for(var i=0;i<this.$refs.checkboxCurlistTwo.length;i++){
                            if(this.$refs.checkboxCurlistTwo[i].checked == true){
                                vaccineidCurlistArrayTwo.push(this.$refs.vaccineidCurlistTwo[i].defaultValue);
                                planidCurlistArrayTwo.push(this.$refs.planidCurlistTwo[i].defaultValue)
                            }
                        }
                    }


                    let  vaccineidTwo = [];
                    let  planidTwo = [];
                    vaccineidTwo=vaccineidHislistArrayTwo.concat(vaccineidContinuelistArrayTwo).concat(vaccineidCurlistArrayTwo);
                    planidTwo=planidHislistArrayTwo.concat(planidContinuelistArrayTwo).concat(planidCurlistArrayTwo);

                    this.formCustom.size=vaccineidTwo.length;
                    for(var i=1;i<vaccineidTwo.length+1;i++){
                        this.formCustom['vaccineid'+i]=vaccineidTwo[i-1];
                    }
                    for(var i=1;i<planidTwo.length+1;i++){
                        this.formCustom['planid'+i]=planidTwo[i-1];
                    }
                    let form =Object.assign(this.formCustom);

                    saveCommon(form).then((res)=>{
                        this.loadingSubmit=false;
                        if(res.data.error==0){
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            that.$Message.error(res.data.message);
                        }
                    });


                } else {    // 一类疫苗

                    let planidOneArray=[];
                    for(let i in $('.planidOneA')){
                        if($('.planidOneA')[i].defaultValue){
                            planidOneArray.push($('.planidOneA')[i].defaultValue)
                        }
                    }
                    for(var i=1;i<planidOneArray.length+1;i++){
                        this.formCustom['vaccineid'+i]=planidOneArray[i-1];
                    }

                    let vaccineidOneArray=[];
                    for(let i in $('.vaccineidOneA')){
                        if($('.vaccineidOneA')[i].defaultValue){
                            vaccineidOneArray.push($('.vaccineidOneA')[i].defaultValue)
                        }
                    }
                    for(var i=1;i<vaccineidOneArray.length+1;i++){
                        this.formCustom['planid'+i]=vaccineidOneArray[i-1];
                    }
                    console.log(planidOneArray)
                    this.formCustom.size=vaccineidOneArray.length;
                    let form =Object.assign(this.formCustom);
                    saveCommon(form).then((res)=>{
                        this.loadingSubmit=false;
                        if(res.data.error==0){
                            that.$Message.success({
                                content: res.data.message,
                                duration: 1,
                                onClose: function () {
                                    that.$router.push({path: 'registeredprocess'});
                                }
                            });
                        } else {
                            that.$Message.error(res.data.message);
                        }
                    });
                }

            },
            chooseHislistOne(item,index,type,indexFirst){  //一类疫苗到期未种点击选择
                this.vendorReplaceVisible = true;
                this.vendorId = item.vaccinecoding;
                this.chooseType=type;
                this.appointStatus=4;
                this.hislistIndexOne=index;
                this.hislistIndexOneFirst=indexFirst;
                this.vaccineIdIndexOne=item.id;
            },
            checkboxHislistOneClick(item,index,groupIndex){  //一类疫苗到期未种点击复选框
                $('.checkboxHislistTwo' + index).prop('checked',false);
                $('.checkboxHislistTwo' + index)[0].disabled=false;

                let btnHislistTwoArray=$('.btnHislistTwo' + index);
                for (let i in btnHislistTwoArray) {
                    if (btnHislistTwoArray[i].innerText) {
                        btnHislistTwoArray[i].innerText = '选择';
                    }
                }
                $('.planidHislistOne'+index)[0].defaultValue = '';
                $('.vaccineidHislistOne'+index)[0].defaultValue = '';
            },
            chooseContinuelistOne(item,index,type,indexFirst){  //一类疫苗延续接种点击选择
                this.vendorReplaceVisible = true;
                this.vendorId = item.vaccinecoding;
                this.chooseType=type;
                this.appointStatus=5;
                this.continuelistIndexOne=index;
                this.continuelistIndexOneFirst=indexFirst;
                this.vaccineIdIndexOne=item.id;
            },
            checkboxContinuelistOneClick(item,index,groupIndex){ //一类疫苗延续接种点击复选框
                $('.checkboxContinuelistTwo' + index).prop('checked',false);
                $('.checkboxContinuelistTwo' + index)[0].disabled=false;

                let btnHislistTwoArray=$('.btnContinuelistTwo' + index);
                for (let i in btnHislistTwoArray) {
                    if (btnHislistTwoArray[i].innerText) {
                        btnHislistTwoArray[i].innerText = '选择';
                    }
                }
                $('.planidContinuelistOne'+index)[0].defaultValue = '';
                $('.vaccineidContinuelistOne'+index)[0].defaultValue = '';
            },
            chooseCurlistOne(item,index,type,indexFirst){  //一类疫苗常规接种点击选择
                this.vendorReplaceVisible = true;
                this.vendorId = item.vaccinecoding;
                this.chooseType=type;
                this.appointStatus=6;
                this.curlistIndexOne=index;
                this.curlistIndexOneFirst=indexFirst;
                this.vaccineIdIndexOne=item.id;
            },
            checkboxCurlistOneClick(item,index,groupIndex){  //一类疫苗常规接种点击复选框
                $('.checkboxCurlistTwo' + index).prop('checked',false);
                $('.checkboxCurlistTwo' + index)[0].disabled=false;

                let btnHislistTwoArray=$('.btnCurlistTwo' + index);
                for (let i in btnHislistTwoArray) {
                    if (btnHislistTwoArray[i].innerText) {
                        btnHislistTwoArray[i].innerText = '选择';
                    }
                }
                $('.planidCurlistOne'+index)[0].defaultValue = '';
                $('.vaccineidCurlistOne'+index)[0].defaultValue = '';
            },
            // 其他操作
            refuse(val,status){
                refuseino({
                    peopleid: this.peopleid,
                    planid: val.id,
                    type: status,
                    babytype: 0   // 儿童是0 成人是1
                }).then((res) => {
                    if (res.data.error==0){
                        peoplePlanbaby({
                            id: this.turnId,
                            peopleid: this.peopleid,
                            vaccineType: this.vaccineSelectType
                        }).then((resPeople) => {
                            if (resPeople.data.error == 0) {
                                if(resPeople.data.lastlist.length==0){
                                    // 本次推荐
                                    this.peopleInfo = resPeople.data.people;
                                    this.hislist = resPeople.data.hislist;
                                    this.continuelist = resPeople.data.continuelist;
                                    this.curlist = resPeople.data.curlist;
                                }else{
                                    // 进入上次预约
                                    this.$router.push({path: '/home/lastAppoint',query:{turnId: this.turnId,peopleid: this.peopleid}});
                                }
                            }
                        });
                    }
                })
            },
            // 录入
            entry(val){
                this.entryVisible=true;
                this.entryInfo=val;
            },
        }
    }

</script>

<style lang="less">
    .the-appoint{
        .ivu-dropdown{
            position: relative;
        }
        .btn-wrapper{
            text-align: center;
            margin:40px 0;
        }
        .appoint-top{
            background: #fff;
            padding:20px 10px;
            .right-arrow{
                width:12px;
                height: 12px;
            }
            .history-text{
                color:#EF7575;
                margin-right: 8px;
                cursor: pointer;
            }
        }
        .title-cen{
            font-size:14px;
            color:rgba(53,76,107,1);
            margin:18px 0 7px;
        }
        .list-data{
            background: #fff;
            padding:20px 0;
            .condition{
                border-bottom: 1px dashed #D2D2D2;
                padding-left:10px;
                .label{
                    font-size: 14px;
                }
            }
        }
        .table-vaccine{
            margin-top:30px;
            .table-points{
                padding:20px 10px;
            }
            .table-con{
                table{
                    width:100%;
                    text-align: center;
                    font-size: 14px;
                    border-collapse:collapse;
                    thead{
                        height:38px;
                        background:rgba(93,140,254,1);
                        font-size:14px;
                        font-family:PingFang-SC-Bold;
                        font-weight:bold;
                        color:rgba(255,255,255,1);
                        tr{
                            height:38px;
                            line-height: 38px;
                        }
                    }
                    tbody{
                        tr{
                            background:rgba(245,250,255,1);
                            td{
                                padding:15px 0;
                            }
                            &:nth-child(even){
                                background:#fff;
                            }
                        }
                    }
                }
                .table-btn{
                    display: flex;
                    margin-top:10px;
                    .choose-vendor{
                        flex: 1;
                        background:rgba(93,140,254,1);
                        border-radius:6px;
                        color:rgba(255,255,255,1);
                        margin-right:12px;
                        font-size: 14px;
                    }
                    .btns{
                        .ivu-btn{
                            width:80px;
                            height: 38px;
                            background: #fff;
                            border:1px solid #5D8CFE;
                            color:#5D8CFE;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
        .bottom-btn{
            margin-top:30px;
            text-align: center;
            .submit-btn{
                width:159px;
                height:48px;
                background:rgba(93,140,254,1);
                border-radius:6px;
                color: #ffffff;
                font-size: 14px;
                margin-right: 40px;
            }
            .cancel-btn{
                width:119px;
                height:48px;
                background:rgba(209,217,238,1);
                border-radius:6px;
                color:rgba(255,255,255,1);
                font-size: 14px;
            }
        }
        .no-data{
            text-align: center;
            font-size: 14px;
            color:#D1D9EE;
            padding:20px 0;
        }
        .vaccine-select{
            text-align: center;
            .ivu-btn{
                width:161px;
                height:44px;
                background:rgba(209,217,238,1);
                font-size:14px;
                color:rgba(255,255,255,1);
                border-radius:0;
                &:nth-child(2){
                    margin-left:-5px;
                }
                &:focus{
                    box-shadow: none;
                }
                &:active{
                    border-color: #d1d9ee;
                }
                &.active{
                    background: #8A82F9;
                }
            }
        }
        .vaccination-top{
            width:140px;
            height:38px;
            line-height: 38px;
            background:rgba(255,161,109,1);
            font-size:14px;
            font-family:PingFang-SC-Bold;
            color:rgba(255,255,255,1);
            display: inline-block;
            text-align: center;
            cursor: default;
        }
        .select-vendor{
            background:rgba(93,140,254,1);
            border-radius:6px;
            color:rgba(255,255,255,1);
            font-size: 13px;
        }
    }
</style>
